<template>
	<view>
		
		<UserSearch></UserSearch>
		<!-- 轮播图 -->
		<u-swiper :list="swiperdata" name="image_src" 
		height="340"
		img-mode="scaleToFill"
		></u-swiper>
		<!-- 轮播图 -->

		<!-- 导航菜单 -->
		<view class="index_cate" >
			<navigator 
				v-for="item in Catitems"
				:key="item.name"
				
				 class="nav">
				<u-image  :src="item.image_src" height="140px" width="100px"></u-image>
			</navigator>
		</view>
		  
		<!-- 导航菜单 -->
		<!-- 楼层模块 -->
		<view class="floor">
			<view class="floorGroup" v-for="item1 in Floordata" :key="item1.floor_title.name">
			
				<view class="floor-tittle">
					<!-- 标题 -->
					<u-image  :src="item1.floor_title.image_src" height="59px" width="750px"></u-image>
					
					  
				</view>
				<view class="floor-context">
						<!-- 内容 -->
						<navigator v-for=" item2 in item1.product_list" ::key="item2.name" height="382px">
							<!-- <u-image  :src="item2.image_src"  mode:="widthFix"></u-image> -->
							<u-image height="100%" :src="item2.image_src" mode="scaleToFill" ></u-image>
							  
						</navigator>
						  
				</view>
				  
				  
				
			</view>
			  
			
		</view>
		  
		<!-- 楼层模块 -->
	</view>
	  
</template>
<script>
export default {
	data() {
		return {
			swiperdata: [],	
			Catitems: [],
			Floordata:[]
		}
	},
	onLoad() {
		this.getswiperdata();
		//调用获取导航菜单
		this.getCatitems()
		// 调用楼层接口
		this.getFloordata()
	},
	methods: {
	async getswiperdata() {
			
			let ret = await this.$u.get('/home/swiperdata');
			// 此处在函数体外写了async，并且使用了await等待返回，所以可以打印ret结果
			// 意味着这里的console.log是等待了几十毫秒请求返回后才执行的
			// console.log(ret);
			this.swiperdata = ret.message
		},
		// 获取导航菜单
		async getCatitems() {
			const res = await this.$u.get('/home/catitems');
			// console.log(res);
			this.Catitems = res.message
		},
		// 获取楼层/home/floordata
		async getFloordata() {
			const res = await this.$u.get('/home/floordata');
			// console.log(res);
			this.Floordata = res.message
		},
	},
}
</script> 
<style lang="scss"  scoped>
.index_cate{
	display: flex;
	margin-top: 10px;
	
}
.nav{
		flex: 1;
	}

.floor-context{
		overflow: hidden;
		height: 386rpx;
		margin-top: 10rpx;
		navigator{
			float: left;
			margin-left: 14rpx;
		}
		navigator:first-child{
			width: 232rpx;
			height: 386rpx;
		}
		navigator:nth-last-child(-n+4){
			width: 232rpx;
			height: 188rpx;
		}
		navigator:nth-last-child(-n+2){
			margin-top: 14rpx;
		}
	}
</style>